/**
 * Descriptions：
 * <p>
 * Author：ChenME
 * Date：2017/6/30
 * Email：ibelieve1210@163.com
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity,
} from 'react-native';

import CenterCommView from './CMECenterCommView';

import {dealWithIconUrl, ScreenWidth} from '../utils/CommUtils';

var cellLeftImgWidth = 120;
var cellContentPaddingH = 10;

export default class GuessYourLikeView extends Component {

    static defaultProps = {
        api_url: 'http://api.meituan.com/group/v2/recommend/homepage/city/20?userId=160495643&userid=160495643&__vhost=api.mobile.meituan.com&position=23.134643%2C113.373951&movieBundleVersion=100&utm_term=6.6&limit=40&wifi-mac=64%3A09%3A80%3A10%3A15%3A27&ci=20&__skcy=X6Jxu5SCaijU80yX5ioQuvCDKj4%3D&__skua=5657981d60b5e2d83e9c64b453063ada&__skts=1459731016.350255&wifi-name=Xiaomi_1526&client=iphone&uuid=5C7B6342814C7B496D836A69C872202B5DE8DB689A2D777DFC717E10FC0B4271&__skno=FEB757F5-6120-49EC-85B0-D1444A2C2E7B&utm_content=5C7B6342814C7B496D836A69C872202B5DE8DB689A2D777DFC717E10FC0B4271&utm_source=AppStore&utm_medium=iphone&version_name=6.6&wifi-cur=0&wifi-strength=&offset=0&utm_campaign=AgroupBgroupD100H0&__skck=3c0cf64e4b039997339ed8fec4cddf05&msid=0FA91DDF-BF5B-4DA2-B05D-FA2032F30C6C2016-04-04-08-38594',
    };

    constructor(props) {
        super(props);

        //创建数据源
        this.state = {
            dataSource: new ListView.DataSource({rowHasChanged: (row1, row2)=>row1 !== row2}),
        };
    }

    render() {
        return (
            <View style={styles.pageViewStyle}>
                <CenterCommView
                    leftIon="cnxh"
                    leftText="猜你喜欢"
                    rightText=""
                />
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow}
                />
            </View>
        );
    }

    renderRow(rowData) {

        return (
            <TouchableOpacity>
                <View style={styles.listViewCellStyle}>
                    <Image
                        source={{uri: dealWithIconUrl(rowData.imageUrl, 120, 90)}}
                        style={styles.leftImgStyle}/>

                    <View style={styles.rightViewStyle}>
                        <View style={styles.rightTopViewStyle}>
                            <Text style={{color: '#333'}}>{rowData.title}</Text>
                            <Text>{rowData.topRightInfo}</Text>
                        </View>

                        <Text style={{color: 'gray'}}>{rowData.subTitle}</Text>

                        <View style={styles.rightBottomViewStyle}>
                            <Text style={{color: '#ff639b'}}>{rowData.subMessage}</Text>
                            <Text>{rowData.bottomRightInfo}</Text>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        );
    }

    componentDidMount() {
        //从网络上获取数据
        this.loadDataFromNet();
    }

    loadDataFromNet() {
        fetch(this.props.api_url)
            .then((response)=>response.json())
            .then((responseData)=> {

                //更新数据源
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseData.data),
                });
            })
            .catch((err)=> {
                alert(err);
            });
    }
}

const styles = StyleSheet.create({
    pageViewStyle: {
        marginTop: 15,
        backgroundColor: '#fff',
    },

    listViewCellStyle: {
        flexDirection: 'row',
        borderBottomColor: '#e8e8e8',
        borderBottomWidth: 0.5,
        paddingHorizontal: cellContentPaddingH,
        paddingVertical: 10,
        alignItems: 'center',
    },

    rightViewStyle: {
        marginLeft: 5,
        width: ScreenWidth - cellLeftImgWidth - 2 * cellContentPaddingH - 5,
    },

    rightTopViewStyle: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 7,
    },

    rightBottomViewStyle: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginTop: 7,
    },

    leftImgStyle: {
        width: cellLeftImgWidth,
        height: 90,
    },
});